import React, {PureComponent} from 'react'
import {fetchHomeMultidataAction} from '../store/action'

import {connect} from 'react-redux'

export class Category extends PureComponent {
    constructor(props) {
        super()
    }

    componentDidMount() {
        this.props.fetchHomeMultidata();
    }

    render() {
        const {banners} = this.props
        return (
            <div>
                <p>Category Page</p>
                <div>
                    banners:
                    {
                        banners.map(item => {
                            return <p key={item.title}>{item.title}</p>
                        })
                    }
                </div>
            </div>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        banners: state.banners,
        recommends: state.recommends
    }
};

// 将异步请求和store 结合，
const mapDispatchToProps = (dispatch) => {
    return {
        fetchHomeMultidata: () => {
            dispatch(fetchHomeMultidataAction());
        }
    }
}


export default connect(mapStateToProps, mapDispatchToProps)(Category);